<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>箭头函数中this</title>
  </head>
  <body>
    <button>houdunren.com</button>
    <button>hdsms.com</button>
  </body>
  <script>
    let Dom = {
      site: "后盾人",
      handleEvent: function(event) {
        console.log(this.site + event.target.innerHTML);
      },
      show: function() {
        //普通函数的this指向window
        return function log() {
          console.log(this);
        };
        // log();
      },
      bind: function() {
        //对象方法的this指向对象
        const buttons = document.querySelectorAll("button");
        buttons.forEach((elem) => {
          //箭头函数的this指向上下文对象
          elem.addEventListener("click", this);
        });
      }
    };
    Dom.bind();
    Dom.show()();
  </script>
</html>
